/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/news' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="layui-card" style="height: 150px;">
          <div class="layui-card-header">
            <span class="layui-badge">赤</span>
          </div>
          <div class="layui-card-body">
            <div class="value">{{countDatainfo.userNumCount}}</div>
            <div class="title">用户数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="layui-card" style="height: 150px;">
          <div class="layui-card-header">
            <span class="layui-badge layui-bg-orange">橙</span>
          </div>
          <div class="layui-card-body">
            <div class="value">{{countDatainfo.userNumLine}}</div>
            <div class="title">在线用户数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="layui-card" style="height: 150px;">
          <div class="layui-card-header">
            <span class="layui-badge layui-bg-green">绿</span>
          </div>
          <div class="layui-card-body">
            <div class="value">{{countDatainfo.newsNumCount}}</div>
            <div class="title">新闻数目</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="layui-card" style="height: 150px;">
          <div class="layui-card-header">
            <span class="layui-badge layui-bg-blue">蓝</span>
          </div>
          <div class="layui-card-body">
            <div class="value">{{countDatainfo.newsNumCountToday}}</div>
            <div class="title">当日新闻</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 统计图 -->
    <el-row :gutter="30">
      <el-col :span="12" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="12" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="30">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from "echarts";
import {
  countData,
  userWord,
  newsWord,
  getCpuTable,
  newtypeNum
} from "../../ajax/index";
export default {
  name: "welcome",
  data() {
    return {
      SCEoptionchart: "",
      SUMoptionchart: "",
      payNumoptionchart: "",
      payoptionchart: "",
      SCEoption: {
        legend: {
          data: [
            {
              name: "新增用户",
              icon: "rect"
            }
          ],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "新增用户",
            data: [0, 0, 0, 0, 0, 0, 0],
            type: "line"
          }
        ]
      },
      SUMoption: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [
            {
              name: "新增新闻",
              icon: "rect"
            }
          ],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日"
          ]
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [
          {
            name: "销售总金额",
            //   type: 'bar',
            type: "line",
            barGap: 0,
            data: [
              50000,
              70000,
              80000,
              40000,
              50000,
              30000,
              40000,
              60000,
              50000,
              40000,
              60000,
              40000
            ],
            barWidth: 10,
            itemStyle: {
              color: "#108ff9"
            }
          }
        ]
      },
      payoption: {
        backgroundColor: "#2c343c",
        title: {
          text: "新闻分类占比",
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "bottom",
          data: ["娱乐新闻", "体育新闻"]
        },
        series: [
          {
            name: "新闻类型",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 0, name: "娱乐新闻" },
              { value: 0, name: "体育新闻" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      payNumoption: {
        backgroundColor: "#2c343c",
        title: {
          text: "cpu使用量",
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: "#ccc"
          }
        },
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "cpu使用量",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 0, name: "已使用" }]
          }
        ]
      },
      countDatainfo: {
        userNumCount: 0,
        newsNumCount: 0,
        newsNumCountToday: 0,
        userNumLine: 0
      }
    };
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.countData();
    this.$nextTick(() => {
      this.getSCE();
      this.getSUM();
      this.getpay();
      this.getpayNum();
    });
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 交易总笔数
    getSCE() {
      this.SCEoptionchart = Chart.init(this.$refs.SCEchart);
      this.SCEoptionchart.showLoading();
      userWord().then(res => {
        this.SCEoptionchart.hideLoading();
        if (res.code) {
          let data = res;
          this.SCEoptionchart.setOption({
            series: [
              {
                name: "新增用户",
                data: data.userNum,
                type: "line"
              }
            ]
          });
        }
      });
      this.SCEoptionchart.setOption(this.SCEoption);
    },
    // 交易总金额
    getSUM() {
      this.SUMoptionchart = Chart.init(this.$refs.SUMEchart);
      this.SUMoptionchart.showLoading();
      newsWord().then(res => {
        this.SUMoptionchart.hideLoading();
        if (res.code) {
          let data = res;
          this.SUMoptionchart.setOption({
            series: [
              {
                name: "新增新闻",
                data: data.newsNum,
                type: "line"
              }
            ]
          });
        }
      });
      this.SUMoptionchart.setOption(this.SUMoption);
    },
    // 支付方式统计
    getpay() {
      this.payoptionchart = Chart.init(this.$refs.payEchart);
      this.payoptionchart.setOption(this.payoption);
      this.payoptionchart.showLoading();
      newtypeNum().then(res => {
        this.payoptionchart.hideLoading();
        if (res.code) {
          let data = res;
          this.payoptionchart.setOption({
            series: [
              {
                data: data.newtypeNum
              }
            ],
            legend: {
              data: data.typeList
            }
          });
        }
      });
    },
    // 支付方式统计
    getpayNum() {
      this.payNumoptionchart = Chart.init(this.$refs.payNumEchart);
      this.payNumoptionchart.setOption(this.payNumoption);
      this.payNumoptionchart.showLoading();
      getCpuTable().then(res => {
        this.payNumoptionchart.hideLoading();
        if (res.code) {
          let data = res;
          this.payNumoptionchart.setOption({
            series: [
              {
                data: [{ value: Number(data.CpuNum), name: "已使用" }]
              }
            ]
          });
        }
      });
    },
    countData() {
      countData().then(res => {
        if (res.code) {
          this.countDatainfo.newsNumCount = res.data.newsNumCount;
          this.countDatainfo.newsNumCountToday = res.data.newsNumCountToday;
          this.countDatainfo.userNumCount = res.data.userNumCount;
          this.countDatainfo.userNumLine = res.data.userNumLine;
          console.log(this.countDatainfo);
        }
      });
    }
  }
};
</script>
<style lang="scss">
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}

.layui-card {
  margin-top: 40px;
  border-radius: 2px;
  background-color: #eeeeee;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  .layui-card-header {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
    .layui-badge,
    .layui-badge-dot,
    .layui-badge-rim {
      position: relative;
      display: inline-block;
      padding: 0 6px;
      font-size: 12px;
      text-align: center;
      background-color: #ff5722;
      color: #fff;
      border-radius: 2px;
    }
    .layui-bg-orange {
      background-color: #ffb800 !important;
    }
    .layui-bg-green {
      background-color: #009688 !important;
    }
    .layui-bg-blue {
      background-color: #1e9fff !important;
    }
    .layui-badge {
      height: 18px;
      line-height: 18px;
    }
  }
  .layui-card-body {
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
    .value {
      font-size: 35px;
      height: 55px;
      line-height: 55px;
    }
    .title {
      font-size: 13px;
      color: gray;
      margin-left: 7px;
    }
  }
}
.layui-card:last-child {
  margin-bottom: 0;
}
</style>